<html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content=""/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Theming with React Navigation · React Native Paper"/><meta name="twitter:description" content=""/><meta property="og:type" content="website"/><meta property="og:title" content="Theming with React Navigation · React Native Paper"/><meta property="og:description" content=""/><title>Theming with React Navigation · React Native Paper</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body>
    <script>
      var theme;

      try {
        // Check if there is a preference saved
        theme = localStorage.getItem('preference-theme');
      } catch (e) {
        // Ignore
      }

      if (theme === undefined) {
        try {
          // If no preferred theme is set, read OS preference
          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        } catch (e) {
          // Ignore
        }
      }

      if (theme === 'dark') {
        document.body.classList.add('dark-theme');
      }
    </script>
  <div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l1gpol2t" href="index.html">Home</a><a data-selected="false" class="LinkItem_l1gpol2t" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l1gpol2t" href="fonts.html">Fonts</a><a data-selected="false" class="LinkItem_l1gpol2t" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l1gpol2t" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l1gpol2t" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l1gpol2t" href="contributing.html">Contributing</a><a data-selected="true" class="LinkItem_l1gpol2t" href="theming-with-react-navigation.html">Theming with React Navigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="integrate-app-bar-with-react-navigation.html">Integrate AppBar with react-navigation</a><hr class="SeparatorItem_slziuo3"/><a data-selected="false" class="LinkItem_l1gpol2t" href="activity-indicator.html">ActivityIndicator</a><a data-selected="false" class="LinkItem_l1gpol2t" href="animated-fab.html">AnimatedFAB</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l1gpol2t" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l1gpol2t" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="button.html">Button</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-title.html">Card.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-ios.html">Checkbox.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-item.html">Checkbox.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="chip.html">Chip</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="divider.html">Divider</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icon-button.html">IconButton</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion-group.html">List.AccordionGroup</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-icon.html">List.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="modal.html">Modal</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="progress-bar.html">ProgressBar</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-ios.html">RadioButton.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-item.html">RadioButton.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l1gpol2t" href="switch.html">Switch</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input.html">TextInput</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-affix.html">TextInput.Affix</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-icon.html">TextInput.Icon</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-group.html">ToggleButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-row.html">ToggleButton.Row</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Typography</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="caption.html">Caption</a><a data-selected="false" class="LinkItem_l1gpol2t" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l1gpol2t" href="paragraph.html">Paragraph</a><a data-selected="false" class="LinkItem_l1gpol2t" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text.html">Text</a><a data-selected="false" class="LinkItem_l1gpol2t" href="title.html">Title</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="HeaderWrapper_h1b6fqjq"><div class="LogoContainer_lz0sul8"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_l1tdaxxn"/></div><div class="ThemeSwitchDiv_ti2lwtw"><label class="Label_lok00ln" style="--lok00ln-0:#000"><input type="checkbox" disabled="" class="Input_i1midrh5"/><div class="Switch_s120pijg"></div></label><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="23" height="22" fill="orange" viewBox="0 0 130 130" enable-background="new 0 0 129 129"><g><g><path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"></path><path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"></path><path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"></path><path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path><path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"></path><path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"></path><path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"></path><path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"></path><path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path></g></g></svg></div></div><div class="Inner_ir6lat6"><div><h1 id="theming-with-react-navigation">
          <a class="anchor" href="#theming-with-react-navigation">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Theming with React Navigation</h1>
<p>In this guide we will look into how to apply theming for an application using React Native Paper and React Navigation at the same time.</p>
<p>Offering different theme options, especially dark/light ones, becomes increasingly a standard requirement of the modern mobile application. Fortunately, both React Navigation and React Native Paper support configurable theming out-of-the-box.
But how to make them work together?</p>
<h2 id="combining-theme-objects">
          <a class="anchor" href="#combining-theme-objects">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Combining theme objects</h2>
<p>Both libraries require a wrapper to be used at the entry point of the application.
React Navigation exposes <code>NavigationContainer</code> which ensures that navigation works correctly, but also accepts <code>theme</code> as an optional property. Read more about setting up navigation <a href="https://reactnavigation.org/docs/getting-started/">here</a>.
For React Native Paper theme to work, we need to use <code>PaperProvider</code> also at application's entry point.</p>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> TouchableOpacity <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  Card<span class="token punctuation">,</span>
  Title<span class="token punctuation">,</span>
  Paragraph<span class="token punctuation">,</span>
  List<span class="token punctuation">,</span>
  Provider <span class="token keyword">as</span> PaperProvider<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">HomeScreen</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableOpacity</span></span>
    <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
      navigation<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'Details'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        title<span class="token punctuation">,</span>
        content<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span></span>
  <span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Card</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Card.Content</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Title</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Title</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Paragraph</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>content<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Paragraph</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Card.Content</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Card</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">DetailsScreen</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> title<span class="token punctuation">,</span> content <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token operator">?</span><span class="token punctuation">.</span>route<span class="token operator">?</span><span class="token punctuation">.</span>params<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List.Section</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List.Subheader</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">List.Subheader</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List.Item</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>content<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">List.Section</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span> <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Fortunately, both React Navigation and React Native Paper offer very similar API when it comes to theming. It's possible to import default themes in light and dark variants from both.</p>
<p>React Navigation and React Native Paper use the same name for default themes - <code>DefaultTheme</code> and <code>DarkTheme</code>, so we need to alias them at the imports.</p>
<p>Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.</p>
<p>To make things easier we can use <a href="https://www.npmjs.com/package/deepmerge">deepmerge</a> package. With <code>yarn</code> we can install it like this</p>
<pre><code class="language-sh">yarn add deepmerge</code></pre>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>
  NavigationContainer<span class="token punctuation">,</span>
  DarkTheme <span class="token keyword">as</span> NavigationDarkTheme<span class="token punctuation">,</span>
  DefaultTheme <span class="token keyword">as</span> NavigationDefaultTheme<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  DarkTheme <span class="token keyword">as</span> PaperDarkTheme<span class="token punctuation">,</span>
  DefaultTheme <span class="token keyword">as</span> PaperDefaultTheme<span class="token punctuation">,</span>
  Provider <span class="token keyword">as</span> PaperProvider<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> merge <span class="token keyword">from</span> <span class="token string">'deepmerge'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> CombinedDefaultTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDefaultTheme<span class="token punctuation">,</span> NavigationDefaultTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> CombinedDarkTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDarkTheme<span class="token punctuation">,</span> NavigationDarkTheme<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Alternatively, we could merge those themes using vanilla JavaScript</p>
<pre><code class="language-js"><span class="token keyword">const</span> CombinedDefaultTheme <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>PaperDefaultTheme<span class="token punctuation">,</span>
  <span class="token operator">...</span>NavigationDefaultTheme<span class="token punctuation">,</span>
  colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>PaperDefaultTheme<span class="token punctuation">.</span>colors<span class="token punctuation">,</span>
    <span class="token operator">...</span>NavigationDefaultTheme<span class="token punctuation">.</span>colors<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> CombinedDarkTheme <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>PaperDarkTheme<span class="token punctuation">,</span>
  <span class="token operator">...</span>NavigationDarkTheme<span class="token punctuation">,</span>
  colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>PaperDarkTheme<span class="token punctuation">.</span>colors<span class="token punctuation">,</span>
    <span class="token operator">...</span>NavigationDarkTheme<span class="token punctuation">.</span>colors<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h2 id="passing-theme-with-providers">
          <a class="anchor" href="#passing-theme-with-providers">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Passing theme with Providers</h2>
<p>After combining the themes, we will be able to control theming in both libraries from a single source, which will come in handy later.</p>
<p>Next, we need to pass merged themes into the Providers. For this part, we use the dark one - <code>CombinedDarkTheme</code>.</p>
<pre><code class="language-js"><span class="token keyword">const</span> CombinedDefaultTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDefaultTheme<span class="token punctuation">,</span> NavigationDefaultTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> CombinedDarkTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDarkTheme<span class="token punctuation">,</span> NavigationDarkTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PaperProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>CombinedDarkTheme<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>CombinedDarkTheme<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span> <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 id="customizing-theme">
          <a class="anchor" href="#customizing-theme">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Customizing theme</h2>
<p>We don't need to limit ourselves to the themes offered by the libraries in default. Both packages allow for custom themes to be applied.
You can learn all about it their documentations:</p>
<ul>
<li><a href="https://reactnavigation.org/docs/themes/">Theming in React Navigation</a></li>
<li><a href="https://callstack.github.io/react-native-paper/4.0/theming">Theming in React Native Paper</a></li>
</ul>
<h2 id="react-context-for-theme-customization">
          <a class="anchor" href="#react-context-for-theme-customization">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        React Context for theme customization</h2>
<p>Now, we wouldn't want to stay forever with dark theme being on, which is why we need to gain the ability to control theme dynamically. A bit of state management is needed for this purpose.</p>
<p>React Context proves itself very useful in handling cross-cutting concerns like global theme handling, so we will use just that.</p>
<h2 id="creating-context">
          <a class="anchor" href="#creating-context">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Creating Context</h2>
<p>First, we define our Context.</p>
<pre><code class="language-js"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> PreferencesContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">toggleTheme</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  isThemeDark<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2 id="using-context">
          <a class="anchor" href="#using-context">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Using Context</h2>
<p>Context Provider should be imported also at the entry point, as we want it to wrap the whole app, for the theme values to be accessible at every component that we have.</p>
<pre><code class="language-js"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> PreferencesContext <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./PreferencesContext'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> CombinedDefaultTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDefaultTheme<span class="token punctuation">,</span> NavigationDefaultTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> CombinedDarkTheme <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>PaperDarkTheme<span class="token punctuation">,</span> NavigationDarkTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>isThemeDark<span class="token punctuation">,</span> setIsThemeDark<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">let</span> theme <span class="token operator">=</span> isThemeDark <span class="token operator">?</span> CombinedDarkTheme <span class="token punctuation">:</span> CombinedDefaultTheme<span class="token punctuation">;</span>

  <span class="token keyword">const</span> toggleTheme <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">setIsThemeDark</span><span class="token punctuation">(</span><span class="token operator">!</span>isThemeDark<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>isThemeDark<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">const</span> preferences <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useMemo</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
      toggleTheme<span class="token punctuation">,</span>
      isThemeDark<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span>toggleTheme<span class="token punctuation">,</span> isThemeDark<span class="token punctuation">]</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token comment">// Context is wired into the local state of our main component, so that its values could be propagated throughout the entire application</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PreferencesContext.Provider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>preferences<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PaperProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span> <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PreferencesContext.Provider</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Now that the Context is available at every component, all we need to do is import it. Next thing is to provide the user with some UI element to control changing the theme. We will use <code>Paper</code>'s <a href="https://callstack.github.io/react-native-paper/4.0/switch">Switch</a> for this purpose.</p>
<pre><code class="language-js"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useTheme<span class="token punctuation">,</span> Appbar<span class="token punctuation">,</span> TouchableRipple<span class="token punctuation">,</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> PreferencesContext <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./PreferencesContext'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">Header</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> scene <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">useTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> toggleTheme<span class="token punctuation">,</span> isThemeDark <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useContext</span><span class="token punctuation">(</span>PreferencesContext<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Header</span></span>
      <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
        colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          primary<span class="token punctuation">:</span> theme<span class="token operator">?</span><span class="token punctuation">.</span>colors<span class="token punctuation">.</span>surface<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Content</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>scene<span class="token punctuation">.</span>route<span class="token operator">?</span><span class="token punctuation">.</span>name<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableRipple</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">toggleTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Switch</span></span>
          <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> theme<span class="token punctuation">.</span>colors<span class="token punctuation">.</span>accent <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'red'</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isThemeDark<span class="token punctuation">}</span></span>
        <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableRipple</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>And now you can switch between light and dark theme!</p>
<p><img src="screenshots/themingWithReactNavigationDarkLightSwitch.gif" alt="paperGuide1" /></p>
<p>Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.</p>
<p>React Native Paper components will automatically use provided theme thanks to the <code>PaperProvider</code> that is wrapped around the entry point of our application, but we can also access theme values manually with <code>useTheme</code> hook,
exposed by the library. You can see how it's done in the <code>Header</code> component code above.</p>
<p>If light/dark themes are not enough for your use case, you can learn more about creating Material Design themes <a href="https://material.io/design/material-theming/implementing-your-theme.html#color">here</a>.
On <code>main</code> branch of the example app, you will find implemented <a href="https://callstack.github.io/react-native-paper/4.0/menu">Menu</a> component, which allows to choose a few custom themes. Inspecting code in <code>utils</code> and <code>Header</code> may give you some idea how to use your own themes with <code>Paper</code>, in addition to dedicated <a href="https://callstack.github.io/react-native-paper/4.0/menu">docs</a>.</p>
<p>Read more about integrating <code>Paper</code> with <code>React Navigation</code> in a brilliant <a href="https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/">article</a> by <a href="https://twitter.com/trensik">@trensik</a></p>
</div></div></main></div></div>
    <style type="text/css">
      :root {
        --theme-primary-color: #397AF9;
      }
    </style>
  
    <script>
      window.__INITIAL_PATH__ = 'theming-with-react-navigation';
    </script>
  <script src="app.bundle.js"></script><script src="scripts/snack.js"></script><script src="scripts/version.js"></script></body></html>